<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';
import Phone from './Phone.vue';


defineProps<{
}>()

</script>

<template>
  <div class="box-container">
  	<div class="box">		
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
		</div>
  </div>
</template>

<style scoped>
.box-container {
  
		perspective:120em;
}
.box {
    --width:10em;
    --height:10em;
    --deep:10em;
    transform-style: preserve-3d;
    transform-origin: calc(var(--width)/2) calc(var(--height)/2) calc(var(--deep)/-2);
    
    width: var(--width);
    height: var(--height);
    position: relative;
    animation: rotate 3s linear infinite;
    
}
@keyframes rotate {
    0% {        
        transform: rotate3d(1, 1, 1, 0deg);
    }
    100% {        
        transform: rotate3d(1, 1, 1, 360deg);
    }
}
.side {
    position: absolute;
    width: var(--width);
    height: var(--height);
    background-color: #8b8a8a;
    border: 0.1em solid #000;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}
.box .side::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: #8b8a8a; */
    border: 0.1em solid #000;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}
.box .side:nth-child(1) {
    background-color: transparent;
}
.box .side:nth-child(2) {
    transform: rotate3d(0, 1, 0, 180deg) translate3d(0,0, var(--deep));
    background-color: red;
}
.box .side:nth-child(3) {
  transform: rotate3d(0, 1, 0, 90deg) translate3d(0,0,calc(var(--width)*0.5))  translate3d(calc(var(--width)*0.5),0,0) ;
  background-color: green;
}
.box .side:nth-child(4) {
  transform: rotate3d(0, 1, 0, 90deg) translate3d(0,0,calc(var(--width)*-0.5))  translate3d(calc(var(--width)*0.5),0,0) ;
  background-color: yellow;
}
.box .side:nth-child(5) {
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0,0,calc(var(--width)*-0.5))  translate3d(0,calc(var(--width)*-0.5),0) ;
  background-color: pink;
}
.box .side:nth-child(6) {
  transform: rotate3d(1, 0, 0, -90deg) translate3d(0,0,calc(var(--width)*-0.5))  translate3d(0,calc(var(--width)*0.5),0) ;
  background-color: purple;
}

</style>